<template>
  <div class="tw-mobilelibnavs">
     <van-tabbar v-model="active">
      <van-tabbar-item
        v-for="(nav, idx) in navs"
        :key="nav.name"
        :url="nav.href"
        :name="nav.name">
        <span>{{nav.name}}</span>
        <template v-if="getIcons('default', idx)" #icon="props">
          <img :style="{width: iconSize}"
            :src="props.active ? `${$twApp.fileBaseUrl}${getIcons('active', idx).localPath}` : `${$twApp.fileBaseUrl}${getIcons('default', idx).localPath}`" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
   </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import page from '../tw-lib-base/page/mixins'

export default {
  name: 'lib-name',

  mixins: [page, style],

  props,

  data() {
    return {
      navs: [],
      active: ''
    }
  },

  computed: {
    style () {
      return {
        color: this.color
      }
    }
  },

  methods: {
    init () {
      this.navs = []

      const roleIdList = this.$twApp.user.roleIdList || []
      const pathname = window.location.pathname
      const navs = JSON.parse(JSON.stringify(this.dataIsFromPortal ? this.apiNavList : this.navList))

      navs.forEach(item => {
        if ((!item.roles || item.roles.length === 0) || roleIdList.filter((role) => item.roles.includes(role)).length > 0) {
          if (item.activeText) {
            if (pathname.includes(item.activeText)) {
              this.active = item.name
            }
          } else if (item.href) {
            if (pathname.includes(item.href.replace(/^\./, ''))) {
              this.active = item.name
            }
          }

          this.navs.push(item)
        }
      })

      if (navs.length > 0 && !this.active) {
        this.active = this.navs[0].name
      }
    },

    getIcons (type, idx) {
      if (type === 'default') {
        return this.icons[idx]
      } else {
        return this.activeIcons[idx] || this.icons[idx]
      }
    },

    setStyle () {
      const style = `
        ::root.tw-libname {
          color: ${this.color};
        }
      `

      this.addStyle(style)
    }
  },

  created () {
    window.aaa = this
    this.init()
  },

  watch: {
    apiNavList () {
      this.init()
    },

    navList () {
      this.init()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
